<template>
  <span>
    <el-input v-model="modelValue" @focus="onFocus"></el-input>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="1400px" destroy-on-close append-to-body>
      <div style="height: 300px">
        <FormTable
          :table-label="tableLabel"
          :table-data="tableData"
          :current-page.sync="paginationData.currentPage"
          :page-size.sync="paginationData.pageSize"
          :table-total-size="tableTotalSize"
          pagination
          selection
          highlight-current-row
          @current-change="currentchange"
          @paginationChange="paginationChange"
          @selection-change="handleSelectionChange"
        ></FormTable>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="!row" @click="determineClick">确 定</el-button>
      </span>
    </el-dialog>
  </span>
</template>

<script>
import FormTable from '@/components/form-table'
export default {
  components: { FormTable },
  inject: ['formSize'],
  props: {
    value: {
      default: undefined
    },
    conf: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dialogVisible: false,
      tableLabel: [
        {
          prop: 'assetCode',
          label: ' 资产编号'
          // filters: [
          //   { text: '1', value: '1' },
          //   { text: '2', value: '2' },
          //   { text: '3', value: '3' },
          //   { text: '4', value: '4' }
          // ],
          // filterMethod
        },
        {
          prop: 'name',
          label: '资产名称'
        },

        {
          prop: 'status',
          label: '状态标识'
        },
        {
          prop: 'sourceDept',
          label: '来源单位'
        },
        {
          prop: 'sourceDev',
          label: '来源设备/系统'
        }
      ],
      tableData: (() => {
        const arr = []
        for (let index = 1; index < 10; index++) {
          arr.push({
            assetCode: 'assetCode' + index,
            equipmentType: 'equipmentType' + index,
            createTime: 'createTime' + index,
            status: 'status' + index,
            sourceDept: 'sourceDept' + index,
            sourceDev: 'sourceDev' + index
          })
        }

        return arr
      })(),
      selectItems: [],
      paginationData: { currentPage: 1, pageSize: 10 },
      tableTotalSize: 4,
      row: null
    }
  },
  computed: {
    size() {
      return this.formSize?.() ?? 'small'
    },
    modelValue: {
      get() {
        return this.value ?? undefined
      },
      set(value) {
        this.$emit('input', value, { aaa: value + '1123', ddd: '1123' + value, ccc: value })
      }
    }
  },
  methods: {
    onFocus() {
      this.$emit('ccc', 123)
      this.dialogVisible = true
      this.row = null
    },
    handleSelectionChange(val) {
      this.selectItems = val
    },
    paginationChange(val) {
      console.log(this.paginationData, 'paginationData')
    },
    currentchange(val) {
      this.row = val
    },
    determineClick() {
      const changeValue = {}
      this.conf.__config__.bindMap.forEach(({ bindKey, dataKey }) => {
        bindKey && dataKey && (changeValue[bindKey] = this.row[dataKey])
      })
      this.$emit('input', this.row[this.conf.__config__.dataBindKey], changeValue)
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 10px 20px 0px;
}
</style>
